<template>
	<div class="chapter_resource">
		<div class="title">
			<svg-icon :icon-name="attachData.attrSuffixStr | fileTypeIcon" size="24"></svg-icon>
			<h2>{{ data.name }}</h2>
		</div>
		<div class="cover">
			<video v-if="data.type === '6'" :src="`${attachData.videoUrl}#t=1`" />
			<pdf class="pdf" v-if="data.type === '7'" :src="attachData.videoUrl" />
			<el-button type="text" icon="el-icon-view" @click="handlePreviewFile()">预览</el-button>
		</div>
		<div class="attrs">
			<p>播放时长：{{ data.strategy || '0' }}分钟</p>
			<p>作者：{{ data.author }}</p>
		</div>
		<div class="button">
			<el-button type="text" @click="handleEditeData()">编辑</el-button>
			<el-button type="text" @click="handleDeleteData()">删除</el-button>
		</div>
	</div>
</template>

<script>
import pdf from 'vue-pdf';
import lodash from 'lodash';
import { deleteKnowledge } from '@/api/course/sysKnowledge';
export default {
	components: { pdf },
	props: {
		data: { type: Object, default: () => {} }
	},
	data() {
		return {};
	},
	computed: {
		attachData() {
			let fields = ['attrSuffixStr'];
			let attach = this.data.sysAttachment || {};
			let datas = lodash.pick(attach, fields);
			let httpUrl = attach.httpUrl?.replaceIP() || '';
			return { ...datas, type: this.data.type, videoUrl: httpUrl };
		},
		pdfFileUrl() {
			return `pdfjs/web/viewer.html?file=${this.attachData.videoUrl}#page=1`;
		}
	},
	methods: {
		//修改视频
		handleEditeData() {
			this.$parent.handleOpenDialog(this.data);
		},

		//删除视频
		handleDeleteData() {
			let that = this;
			this.$confirm('此操作将永久删除该课程资源, 是否继续?', '删除提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteKnowledgeRequest();
						instance.confirmButtonLoading = false;
					}
					done();
				}
			}).catch(() => {});
		},

		//删除知识点请求
		async deleteKnowledgeRequest() {
			let result = await deleteKnowledge(this.data.id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除知识点成功');
				this.$parent.handleRefreshVideo();
			}
		},

		//预览文件
		handlePreviewFile() {
			if (this.data.type === '6') {
				this.$bus.$emit('filePreview', this.data, 'video');
			} else if (this.data.type === '7') {
				this.$bus.$emit('filePreview', this.data, 'document');
			} else {
				this.$bus.$emit('filePreview', this.data);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.chapter_resource::v-deep {
	overflow: hidden;
	border-radius: 4px;
	border: solid 1px #f2f6fc;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	.title {
		padding: 10px;
		border-bottom: solid 1px #ebeef5;
		.svg-icon {
			float: left;
			margin: 2px 10px 0 0;
		}
		h2 {
			font-size: 18px;
			line-height: 28px;
			word-break: break-all;
		}
	}
	.cover {
		position: relative;
		padding-top: 56.25%;
		overflow: hidden;
		video,
		span.pdf {
			position: absolute !important;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.el-button--text {
			position: absolute;
			top: 0;
			left: 0;
			color: #fff;
			width: 100%;
			height: 100%;
			font-size: 24px;
			border-radius: 0;
			background-color: rgba(0, 0, 0, 0.5);
			display: none;
		}
		&:hover .el-button--text {
			display: block;
		}
	}
	.attrs {
		display: flex;
		flex-wrap: wrap;
		padding: 12px 0;
		color: #606266;
		line-height: 2em;
		p {
			padding: 0 12px;
			min-width: 50%;
			box-sizing: border-box;
		}
	}
	.button {
		display: flex;
		align-items: center;
		border-top: solid 1px #ebeef5;
		justify-content: space-between;
		width: 100%;
		.el-button {
			flex: 1;
			margin: 0;
			border-radius: 0;
			&:first-child {
				border-right: solid 1px #ebeef5;
			}
		}
	}
}
</style>
